<template>
  <div class="oe-proctor-manage" v-loading="loading">
    <info-top :showExpend="false"></info-top>
    <div class="oe-proctor-container">
      <top-tip :batchTitle="batchTitle" :examTitle="examTitle" :showBack="false"></top-tip>
      <div class="oe-proctor-content">
        <div :class="['oe-proctor-left', isOpenList ? 'full' : '']">
          <div class="oe-left-top">
            <div class="oe-title-info">
              <div class="oe-info-line">
                <span class="oe-info-text"
                  >出题方式：{{
                    examInfo.ZtWay === 1
                      ? '从卷库选择'
                      : examInfo.ZtWay === 2
                      ? '手动出题'
                      : examInfo.ZtWay === 4
                      ? '随机出题'
                      : '--'
                  }}</span
                >
                <span class="oe-info-text"
                  >监考授权码：
                  <a-button type="primary" class="reset-look-btn" @click="lookDetail(1)">点击查看</a-button>
                </span>
                <span class="oe-info-text"
                  >监考教师链接：
                  <a-button type="primary" class="reset-look-btn" @click="lookDetail(2)">点击查看</a-button>
                </span>
                <span class="oe-info-text"
                  >考试链接：
                  <a-button type="primary" class="reset-look-btn" @click="showExamLink">点击查看</a-button>
                </span>
              </div>
              <div class="oe-info-two">
                <span class="oe-info-text">参考人数：{{ monitorStuCount || '--' }}</span>
                <span class="oe-info-text"
                  >考试时间：{{ startTime ? startTime : '' }} --
                  {{ endTime ? endTime : '' }}
                </span>
              </div>
            </div>
            <div class="oe-reset-time">
              <span class="oe-time-set__title" v-if="resetTime">剩余时间：</span>
              <span class="oe-time-set">{{ resetTime || '--' }}</span>
            </div>
            <a-tooltip>
              <template slot="title">
                考试异常列表
              </template>
              <span :class="['iconfont', 'icon-zhankai1', isOpenList ? 'rotate' : '']" @click="openList"></span>
            </a-tooltip>
          </div>
          <div class="oe-left-bottom">
            <div class="oe-bottom-input">
              <a-checkbox :indeterminate="indeterminate" @change="onCheckAllChange" :checked="checkAll">
                全选
              </a-checkbox>
              <span class="oe-student-input"
                >姓名/学号：
                <a-input v-model="student" placeholder="请输入学号/姓名" @keyup.13="getStudentList"></a-input>
              </span>
              <a-button type="primary" @click="getStudentList">查询</a-button>
              <span class="oe-student-status">
                考试状态：
                <a-select style="width: 120px" v-model="selectStatus">
                  <a-select-option :value="2">全部</a-select-option>
                  <a-select-option :value="1">已交卷</a-select-option>
                  <a-select-option :value="3">未开始</a-select-option>
                  <a-select-option :value="0">进行中</a-select-option>
                </a-select>
              </span>
              <a-button type="primary" @click="manyDelaySet" v-if="isDelay">批量延时</a-button>
              <a-button type="primary" @click="manySubmit">批量交卷</a-button>

              <a-button type="primary" @click="sendMessagePopup">发送提醒</a-button>
              <a-button type="primary" @click="getExamMessageList()">提醒列表</a-button>

              <a-button type="primary" @click="showBSAction(1)">{{ showBullet ? '隐藏' : '显示' }}弹幕</a-button>
              <a-button type="primary" @click="showBSAction(2)">{{ showShine ? '隐藏' : '显示' }}闪烁</a-button>
              <a-button type="primary" @click="showBSAction(3)" v-if="isUseCamera">批量设置摄像头</a-button>
              <!-- <a-button type="primary" @click="showBSAction(4)">批量解禁</a-button> -->
              <a-button type="primary" @click="report">监考报告</a-button>            

              <div>
                <a-button @click="selectStatus = 0">进行中人数({{ studentStateNmber.doIngCount}})</a-button>
                <a-button @click="selectStatus = 3">未开始人数({{ studentStateNmber.noBeginDoCount}})</a-button>
                <a-button @click="selectStatus = 1">已交卷人数({{ studentStateNmber.submitCount }})</a-button>
                <a-pagination style="float: right; margin-right: 100px"
                  show-size-changer
                  v-model="studentStateNmber.current"
                  :page-size.sync="studentStateNmber.pageSize"
                  :total="studentStateNmber.totalCount"
                  :pageSizeOptions="studentStateNmber.pageSizeOptions"
                  @showSizeChange="onShowSizeChange"
                  @change="onShowSizeChange"
                >
                <template slot="buildOptionText" slot-scope="props">
                  <span>{{ props.value }}条/页</span>
                </template>
                </a-pagination>
              </div>
            </div>
            <div class="oe-bottom-content">
              <a-checkbox-group @change="onselectChange" v-model="checkedList">
                <div
                  v-for="student in studentList"
                  :key="student.UserId"
                  :ref="`stu_${student.UserId}`"
                  :class="[
                    'oe-student-item',
                    student.borderState == 1
                      ? 'border-already'
                      : student.borderState == 2
                      ? 'border-nostart'
                      : student.borderState == 3
                      ? 'border-doing'
                      : 'border-danger'
                  ]"
                >
                  <div v-if="!student.IsStuUseCamera && isUseCamera">
                    <i class="oe-isOpenCamera iconfont icon-ai12"></i>
                  </div>
                  <div class="oe-item-container" @click.stop.prevent="lookStudentDetail(student)">
                    <div
                      class="oe-item-avatar"
                      :style="{
                        background: 'url(' + student.AvatorUrl + ') center 50%/cover no-repeat'
                      }"
                    ></div>
                    <div class="oe-item-name">{{ student.DisplayName }}</div>
                    <div class="oe-item-number">{{ student.UserNo }}</div>
                    <div
                      :class="[
                        'oe-item-line',
                        student.status === 1
                          ? 'border-already'
                          : student.status === 2
                          ? 'border-nostart'
                          : 'border-doing'
                      ]"
                    ></div>
                    <div
                      :class="[
                        'oe-item-status',
                        student.status === 1 ? 'color-already' : student.status === 2 ? 'color-nostart' : 'color-doing'
                      ]"
                    >
                      {{ student.status == 1 ? '已交卷' : student.status == 2 ? '未开始' : '进行中' }}
                    </div>
                    <div
                      :class="[
                        'oe-item-type',
                        student.status === 1 ? 'bg-already' : student.status === 2 ? 'bg-nostart' : 'bg-doing'
                      ]"
                    >
                      {{ student.LoginCode || '--' }}
                    </div>
                  </div>
                  <a-checkbox
                    :value="student.UserId"
                    :class="[
                      'oe-student-check',
                      student.status == 1
                        ? 'border-ek-already'
                        : student.status == 2
                        ? 'border-ek-nostart'
                        : 'border-ek-doing'
                    ]"
                  ></a-checkbox>
                  <span class="iconfont icon-jingshi1 oe-item-warming" :ref="`icon_${student.UserId}`"></span>
                </div>
              </a-checkbox-group>
              <blank-tips v-if="!studentList.length"></blank-tips>
            </div>
          </div>
        </div>
        <div class="oe-proctor-right">
          <div class="oe-proctor-title">
            考试异常列表
            <a-tooltip placement="bottom" class="oe-push-top__title">
              <template slot="title">
                <span class="oe-title-info">学生作答考试时离开作答页面记录列表</span>
              </template>
              <i class="iconfont icon-wenti"></i>
            </a-tooltip>
          </div>
          <div class="oe-proctor-table">
            <a-table
              :columns="columns"
              :dataSource="dataList"
              :pagination="pagination"
              @change="onTableChange"
              :locale="locales.zh_CN"
            >
              <span slot="operation" slot-scope="text, record">
                <a-tooltip placement="bottom">
                  <template slot="title">
                    <span>查看详情</span>
                  </template>
                  <span class="iconfont icon-chakan" @click.stop="lookStudentDetail(record)"></span>
                </a-tooltip>
              </span>
            </a-table>
          </div>
        </div>
      </div>
      <template v-if="showBullet && splitList.length">
        <div
          class="oe-screen-split"
          v-for="item in splitList"
          :key="item.id"
          :style="{ top: item.top, animationDelay: item.delay }"
        >
          <i class="iconfont icon-jingshi1"></i>
          {{ item.DisplayName }}
        </div>
      </template>
    </div>
    <a-modal title="验证激活码" :visible="codeDlg" :closable="false">
      <span class="oe-exam-text">激活码：</span>
      <a-input v-model="activationCode" maxLength="8" placeholder="请输入解封激活码"></a-input>
      <div slot="footer">
        <a-button type="primary" @click.stop="verificationCode">确认</a-button>
      </div>
    </a-modal>
    <a-modal centered :title="lookTitle" :visible="visible" class="oe-proctor-modal" :closable="false">
      <p class="code" :style="{ fontSize: lookTitle == '监考授权码' ? '28px' : '20px' }">{{ ModalText }}</p>
      <template slot="footer">
        <span
          class="ant-btn ant-btn-primary"
          ref="copyBtn"
          style="margin: 0 20px;"
          :data-clipboard-text="ModalText"
          @click="copyMa"
          >复制</span
        >
        <a-button @click.stop="visible = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal centered :title="lookTitle" :visible="examDlg" class="oe-proctor-modal" :closable="false">
      <div class="oe-exam-link">
        <span class="oe-link-title">电 脑 端 链 接：</span>
        <input class="oe-link-inp" v-model="examLink" id="copyInput" readonly="readonly" />
        <span
          ref="copyBtn"
          class="oe-copy-link"
          @mouseover.once="copyLinkAction"
          data-clipboard-target="#copyInput"
          @click.stop="copyLinkAction"
          >复制链接</span
        >
      </div>
      <div class="oe-exam-link">
        <span class="oe-link-title">手 机 端 链 接：</span>
        <input class="oe-link-inp" v-model="h5ExamLink" id="copyIdMobile" readonly="readonly" />
        <span
          ref="copyMobile"
          class="oe-copy-link"
          @mouseover.once="copyLinkMobile"
          data-clipboard-target="#copyIdMobile"
          @click.stop="copyLinkMobile"
          >复制链接</span
        >
      </div>
      <div class="oe-exam-link" @click="showModal">
        <span class="oe-link-title reset-indent">手机端二维码：</span>
        <div style="display:inline-block;vertical-align: top;">
          <qrcode-vue class="oe-qrcode" :value="h5LoginUrl" :size="size" level="H"></qrcode-vue>
          <a-modal
            :visible="qrCode"
            :confirm-loading="confirmLoading"
            :footer="null"
            @ok="handleOk"
            @cancel="handleCancel"
            :centered="true"
            width="700px"
          >
            <qrcode-vue class="oe-qrcode" :value="h5LoginUrl" :size="600" level="H"></qrcode-vue>
          </a-modal>
        </div>
      </div>
      <template slot="footer">
        <a-button @click.stop="examDlg = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal centered title="考试延时" :visible="timeVisible" :afterClose="afterClose" @cancel="timeVisible = false">
      <div class="time-delay">
        <a-input type="number" v-model="delayTime" :min="0" placeholder="请输入延时的时间/分钟"></a-input>
      </div>
      <template slot="footer">
        <a-button type="primary" @click.stop="sureDelay">确认</a-button>
        <a-button @click.stop="timeVisible = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal
      centered
      title="学生考试详情"
      class="oe-stuDetail-modal"
      width="80%"
      :afterClose="detailClose"
      :visible="detailVisible"
      @cancel="detailVisible = false"
    >
      <div class="stu-detail-modal">
        <div class="student-detail-item">考生姓名：{{ studenExamDetail.name }}</div>
        <div class="student-detail-item">用户名：{{ studenExamDetail.userName }}</div>
        <div class="student-detail-item">手机号：{{ studenExamDetail.mobile }}</div>
        <div class="student-detail-item">考试状态：{{ studenExamDetail.status }}</div>
        <div class="student-detail-item">考试用时：{{ studenExamDetail.useTime }}</div>
        <div class="student-detail-item">开始作答时间：{{ studenExamDetail.StuStartDoTime }}</div>        
        <div class="student-detail-item">
          异常次数：{{ Number(studenExamDetail.abnormalCount) + Number(studenExamDetail.cutPage) }}
        </div>
        <div class="student-detail-item">交卷时间：{{ studenExamDetail.commitExam }}</div>
        <div class="student-detail-item">作答设备：{{ studenExamDetail.doBrowser }}</div>
        <div class="student-detail-item">交卷设备：{{ studenExamDetail.submitBrowser }}</div>
        <div class="student-detail-item">作答IP：{{ studenExamDetail.doIP }}</div>
        <div class="student-detail-item">交卷IP：{{ studenExamDetail.submitIP }}</div>
        <div class="student-detail-item" v-if="studenExamDetail.delayedTime > 0">
          延时时长：{{ studenExamDetail.delayedTime }} 分钟
        </div>
        <div class="stu-avator" style="right:12%" v-if="studenExamDetail.firstUrl" v-pic>
          <img :src="studenExamDetail.firstUrl" alt="系统抓拍图片"  title="系统抓拍图片" />
        </div>
        <div class="stu-avator" v-pic>
          <img :src="studenExamDetail.avatorUrl" alt="管理员上传图片" title="管理员上传图片" />
        </div>
        <div class="student-detail-table" v-pic v-if="studenExamDetail.RandomList">
          照片：
          <div style="display: inline-block;width: calc(100% - 46px);vertical-align: top;">
            <img
              class="oe-random-img"
              v-for="(img, index) in studenExamDetail.RandomList"
              :key="index"
              :src="img.Url"
              :alt="img.DateCreated"
              :title="img.DateCreated"
            />
          </div>
        </div>
        <div class="student-detail-table">
          <div class="student-detail-table-cut title">切屏时间详情({{ studenExamDetail.cutPage }})：</div>
          <div class="student-detail-table-img title">人脸异常详情({{ studenExamDetail.abnormalCount }})：</div>
        </div>
        <div class="student-detail-table">
          <div class="student-detail-table-cut">
            <a-table
              :columns="cutColumns"
              :dataSource="studenExamDetail.cutList"
              :pagination="false"
              :scroll="{ y: 300 }"
            />
          </div>
          <div class="student-detail-table-img">
            <a-table
              :columns="imgColumns"
              :dataSource="studenExamDetail.abnormalList"
              :pagination="false"
              :scroll="{ y: 300 }"
              v-pic
            >
              <span slot="Url" slot-scope="text, record">
                <img :src="record.Url" :alt="record.DateCreated" :title="record.DateCreated" />
              </span>
            </a-table>
          </div>
        </div>
        <div class="student-detail-table" v-if="studenExamDetail.state != 3">
          成绩是否有效：
          <span>
            <a-radio-group v-model="studenExamDetail.isEffective">
              <a-radio :value="1">
                是
              </a-radio>
              <a-radio :value="2">
                否
              </a-radio>
            </a-radio-group>
          </span>
        </div>
        <div class="student-detail-table" v-if="studenExamDetail.isEffective == 2 && studenExamDetail.state != 3">
          无效理由：
          <span>
            <a-radio-group v-model="studenExamDetail.invalidState">
              <a-radio :value="1">
                缺考
              </a-radio>
              <a-radio :value="2">
                切屏
              </a-radio>
              <a-radio :value="3">
                其他
              </a-radio>
            </a-radio-group>
          </span>
        </div>
        <div
          class="student-detail-item"
          v-if="studenExamDetail.invalidState == 3 && studenExamDetail.isEffective == 2 && studenExamDetail.state != 3"
        >
          <a-input
            placeholder="请填入无效理由"
            v-model="studenExamDetail.invalidReason"
            :rows="4"
            type="textarea"
          ></a-input>
        </div>
      </div>
      <template slot="footer">
        <a-button type="primary" @click.stop="sureUpdate">确认</a-button>
        <a-button @click.stop="detailVisible = false">取消</a-button>
      </template>
    </a-modal>
    <a-modal
      centered
      title="批量设置学生是否使用摄像头"
      :visible="showIsUserCa"
      :afterClose="afterClose"
      @cancel="showIsUserCa = false"
    >
      <div class="time-delay">
        <a-select v-model="getIsUserCa" style="width: 100%">
          <a-select-option :value="1">
            使用
          </a-select-option>
          <a-select-option :value="0">
            不使用
          </a-select-option>
        </a-select>
      </div>
      <template slot="footer">
        <a-button type="primary" @click.stop="sureUserCa">确认</a-button>
        <a-button @click.stop="showIsUserCa = false">取消</a-button>
      </template>
    </a-modal>
    <!-- 发送提醒 -->
    <a-modal centered title="发送提醒" :visible="messageVisible" :afterClose="afterClose" @cancel="messageVisible = false">
      <div class="time-delay">
        <a-textarea v-model="messageData" placeholder="请输入发送内容" :rows="4"/>
      </div>
      <template slot="footer">
        <a-button type="primary" @click.stop="sendMessage()">确认</a-button>
        <a-button @click.stop="messageVisible = false">取消</a-button>
      </template>
    </a-modal>
    <!-- 提醒列表 -->
    <a-modal centered title="提醒记录" class="exam-message-modal" :visible="messageListVisible" :afterClose="afterClose" @cancel="messageListVisible = false">
      <div class="exam-message-modal">
         <a-table
          :columns="modalColumnsIni"
          :dataSource="modalList"
          :pagination="modalPagination"
          @change="onModalChange"
        />
      </div>
      <template slot="footer">
        <a-button @click.stop="messageListVisible = false">关闭</a-button>
      </template>
    </a-modal>

  </div>
</template>

<script>
const { locales } = window.antd;
import infoTop from '@/components/info-top/index.vue';
import topTip from '@/components/top-tip/index.vue';
import Clipboard from 'clipboard';
import QrcodeVue from 'qrcode.vue';
import blankTips from '@/components/blank-tips/index.vue';
import GetOperationList from '@/lib/mixin/methods.js';
export default {
  name: 'proctorManage',
  mixins: [GetOperationList],
  components: {
    topTip,
    infoTop,
    blankTips,
    QrcodeVue
  },
  data() {
    return {
      loading: false,
      locales,
      // 半选中
      indeterminate: false,
      // 是否全选
      checkAll: false,
      // 选中的item
      selectStatus: '全部',
      // 学生输入学号
      student: '',
      studentList: [],
      isRepairPaper: false,
      // 分页配置
      pagination: {
        showLessItems: true,
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
        // showQuickJumper: true,
        showSizeChanger: true,
        size: 'small',
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.pagination.current = current;
          this.pagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      // 表标题
      columns: [
        {
          title: '姓名',
          dataIndex: 'DisplayName',
          width: '25%',
          key: 'DisplayName'
        },
        {
          title: '异常次数',
          dataIndex: 'CutPageCount',
          width: '20%',
          key: 'CutPageCount'
        },
        {
          title: '最后切屏的时间',
          dataIndex: 'DateCreated',
          width: '40%',
          key: 'DateCreated'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          width: '15%',
          key: 'operation',
          scopedSlots: { customRender: 'operation' }
        }
      ],
      // 数据列表
      dataList: [],
      // 切屏列表
      splitList: [],
      visible: false,
      ModalText: '123123123',
      //考试链接弹框
      examDlg: false,
      //PC考试链接
      examLink: '',
      //H5考试链接
      h5ExamLink: '',
      //H5登录考试链接
      h5LoginUrl: '',
      //二维码放大
      qrCode: false,
      // 考试信息列表
      examInfo: '',
      startTime: '',
      endTime: '',
      // 学生状态人数
      studentStateNmber: {
        totalCount: 0,
        pageSize: 100,
        current: 1,
        doIngCount: 0,
        noBeginDoCount: 0,
        submitCount: 0,
        pageSizeOptions: ['10', '20', '50', '100', '1000'],
      },
      //监考人数
      monitorStuCount: 0,
      resetTime: '',
      // 定时器
      setTimer: null,
      maxModifiedTime: '', // 初始时间
      // 缓存时间
      cacheTime: '',
      // 选中的学生列表
      checkedList: [],
      timeVisible: false,
      messageVisible: false,
      delayTime: '',
      // 上次弹幕最大自增值
      seqId: '',
      //0为监考教师（监考部分考生） 1为管理员（监考所有考生）
      teacherType: '',
      //监考教师可以导出监考报告
      sysType: '',
      // 考试状态
      examType: '',
      showBullet: true,
      isFirstStart: true,
      // 是否有弹幕权限
      isHasBullet: false,
      // 是否有右边列表
      isHasList: false,
      // 显示闪烁
      showShine: true,
      isHasShine: false,
      // 是否展开列表
      isOpenList: true,
      // 查看title
      lookTitle: '',
      //激活码
      activationCode: '',
      // 监考码
      loginCode: '',
      // 监考链接
      loginUrl: '',
      // 复制对象
      clipboard: '',
      detailVisible: false,
      //验证激活码进行解封
      codeDlg: false,
      cutColumns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '20%',
          key: 'number'
        },
        {
          title: '切屏时间',
          dataIndex: 'DateCreated',
          width: '80%',
          key: 'DateCreated'
        }
      ],
      imgColumns: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '20%',
          key: 'number'
        },
        { title: '异常截图', dataIndex: 'Url', width: '40%', key: 'Url', scopedSlots: { customRender: 'Url' } },
        {
          title: '异常时间',
          dataIndex: 'DateCreated',
          width: '40%',
          key: 'DateCreated'
        }
      ],
      studenExamDetail: {
        name: 'dd',
        studentNumber: 'dasdas',
        status: '已开始',
        commitExam: '交卷时间',
        StuStartDoTime: '--',
        cutPage: '',
        abnormalList: [],
        cutList: [],
        isEffective: 1,
        invalidReason: '',
        invalidState: 1,
        avatorUrl: '',
        doBrowser: '',
        doIP: '',
        submitBrowser: '',
        submitIP: '',
        delayedTime: 0,
        useTime: '',
        RandomList: [],
        state: '',
        userName: '',
        mobile: '',
        firstUrl: ''
      },
      // 缓存点击的学生
      cacheStudent: '',
      // 是否显示摄像头
      isUseCamera: '',
      //是否显示随机抓取的照片
      isRandomPhoto: '',
      //学生是否使用摄像头
      IsStuUseCamera: '',
      // 是否允许延迟
      isDelay: '',
      showIsUserCa: false,
      // 获取是否使用摄像头
      getIsUserCa: 1,
      batchTitle:'',
      examTitle:'',
      //发送提醒
      messageData: '',
      //消息
      modalColumnsIni: [
        {
          title: '序号',
          dataIndex: 'number',
          width: '8%',
          key: 'number'
        },
        {
          title: '发送教师',
          dataIndex: 'MarkTeaName',
          width: '12%',
          key: 'MarkTeaName',
          sorter: true
        },
        {
          title: '发送时间',
          dataIndex: 'DateCreated',
          width: '14%',
          key: 'DateCreated',
          sorter: true
        },
        {
          title: '学生姓名',
          dataIndex: 'StuDisplayName',
          width: '12%',
          key: 'StuDisplayName',
          sorter: true
        },
        {
          title: '学生账号',
          dataIndex: 'StuUserName',
          width: '12%',
          key: 'StuUserName',
          sorter: true
        },
        {
          title: '内容',
          dataIndex: 'Content',
          width: '14%',
          key: 'Content',
          sorter: true
        },
        {
          title: '是否已读',
          dataIndex: 'ReadStatus',
          width: '14%',
          key: 'ReadStatus',
          sorter: true
        }        
      ],
      // 分页配置
      modalPagination: {
        pageSizeOptions: ['10', '20', '40', '80', '1000'],
        showSizeChanger: true,
        showTotal(total) {
          return `共 ${total} 条`;
        },
        onShowSizeChange: (current, pageSize) => {
          this.modalPagination.current = current;
          this.modalPagination.pageSize = pageSize;
        },
        onChange: (current, pageSize) => {
          this.modalPagination.current = current;
          this.modalPagination.pageSize = pageSize;
        },
        buildOptionText(props) {
          return props.value + '条/页';
        },
        current: 1,
        pageSize: 10,
        total: 0
      },
      modalList: [],
      messageListVisible:false,

    };
  },
  watch: {
    selectStatus(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.studentStateNmber.current = 1;
        this.getStudentList(newVal);
      }
    },
    examType(newVal, oldVal) {
      if (newVal !== oldVal) {
        if (newVal == 0) {
          clearInterval(this.examTimer);
          this.startExam();
        } else if (newVal == 1) {
          this.resetTime = 0;
          clearInterval(this.examTimer);
          this.examTimer = null;
        }
      }
    },
    showBullet(newVal, oldVal) {
      if (newVal) {
        this.isFirstStart = true;
      } else {
        this.isFirstStart = false;
      }
    },
    showShine(newVal, oldVal) {
      if (newVal) {
        this.isFirstStart = true;
      } else {
        this.isFirstStart = false;
      }
    }
  },
  props:{
    batchid:{
      type:String,
      default:''
    },
    examid:{
      type:String,
      default:''
    },
    paperType:{
      type:Number,
      default:0
    },
  },
  mounted(){
    this.getProctorInfo();
    this.getOpeartion()
  },
  methods: {
    getOpeartion() {
      this.loading = true;
      this.GetOperationList('examId',this.examid).then((rst) => {
        this.loading = false;
        if (rst.code === 1) {
          this.examTitle = rst.examTitle
          this.batchTitle = rst.batchTitle
        } else {
          this.$message.error(rst.msg);
        }
      });
    },
    startExam() {
      this.examTimer = setInterval(() => {
        this.getExamStuQueryList();
        if (this.showBullet || this.showShine) {
          if (this.isFirstStart) {
            this.getCutScreen('', 1);
          } else {
            this.getCutScreen();
          }
        }
        if (this.isHasList && !this.isOpenList) {
          this.getCutStudent(this.pagination.current, this.pagination.pageSize);
        }
      }, 20000);
    },
    // 获取考试信息
    getProctorInfo() {
      this.loading = true;
      this.$http
        .post('/api/examMonitor/exammonitor/getExamInfo', {
          examId: this.examid,
          paperType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            if (rst.isSaveKeepType) {
              this.codeDlg = true;
            } else {
              this.examInfo = rst.examInfo;
              this.startTime = rst.startTime;
              this.endTime = rst.endTime;
              this.monitorStuCount = rst.monitorStuCount;
              this.examLink = rst.pcUrl;
              this.h5ExamLink = rst.h5Url;
              this.h5LoginUrl = rst.h5LoginUrl;
              this.teacherType = rst.teacherType;
              this.sysType = rst.sysType;
              this.loginCode = rst.examInfo.InvigilateCode || '----;';
              this.loginUrl = rst.url || '----';
              this.cacheTime = rst.limitTime;
              this.isRepairPaper = rst.isRepairPaper;
              this.examType = rst.examState;
              this.resetTimeAction();
              this.seqId = rst.maxSeqId;
              this.isHasBullet = rst.dm;
              this.isHasList = rst.lb;
              this.isHasShine = rst.ss;
              this.showShine = rst.ss;
              this.showBullet = rst.dm;
              this.isOpenList = rst.lb;
              this.isUseCamera = rst.isUseCamera;
              this.isRandomPhoto = rst.isRandomPhoto;
              this.isDelay = rst.isDelay;
              this.getStudentList('', 1);
              this.getDoExamCountInfo();
              this.getCutStudent();
              this.getCutScreen(rst.maxSeqId);
              this.startExam();
              this.maxModifiedTime = this.formatDateTime();
            }
          } else {
            this.$router.back();
            this.$message.error(rst.msg);
          }
        });
    },
    // 获取状态人数
    getDoExamCountInfo() {
      let that = this;
      this.$http.post('/api/examMonitor/ExamMonitor/getDoExamCountInfo', {
        examId: this.examid,
        teacherType: this.teacherType,
        paperType: this.paperType,
      }).then((rst) => {
        if (rst.code == 1) {
          that.studentStateNmber.doIngCount = rst.doIngCount;
          that.studentStateNmber.noBeginDoCount = rst.noBeginDoCount;
          that.studentStateNmber.submitCount = rst.submitCount;
        }
      });
    },
    onShowSizeChange(current, pageSize) {
      this.studentStateNmber.pageSize = pageSize,
      this.studentStateNmber.current = current;
      this.getStudentList()
    },
    // 获取学生列表
    getStudentList(state, tag) {
      if (tag) {
        this.loading = true;
      }
      this.$http
        .post('/api/examMonitor/exammonitor/getExamStuList', {
          state: state || this.selectStatus,
          examId: this.examid,
          key: this.student,
          pageSize: this.studentStateNmber.pageSize,
          page: this.studentStateNmber.current,
          teacherType: this.teacherType,
          paperType: this.paperType,
          IsStuUseCamera: this.IsStuUseCamera
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.studentStateNmber.totalCount = rst.pagination.totalCount;
            this.studentList = [];
            let studentArray = [];
            if (rst.list.length) {
              rst.list.forEach((item) => {
                studentArray.push({
                  ...item,
                  status: item.State == 3 ? 2 : item.State == 0 ? 3 : item.State == 1 ? 1 : 4,
                  borderState: item.State == 3 ? 2 : item.State == 0 ? 3 : item.State == 1 ? 1 : 4
                });
              });
              this.studentList = this.conformity(studentArray);
              if (rst.cutStuList.length) {
                rst.cutStuList.forEach((id) => {
                  let index = this.studentList.findIndex((stu) => {
                    return stu.UserId === id;
                  });
                  if (index > -1) {
                    this.studentList[index].borderState = 4;
                  }
                });
              }
            }
            this.$forceUpdate();
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 获取学生状态列表
    getExamStuQueryList() {
      let that = this;
      this.$http
        .post('/api/examMonitor/exammonitor/getExamStuQueryList', {
          examId: this.examid,
          teacherType: this.teacherType,
          paperType: this.paperType,
          modifiedTime: this.maxModifiedTime
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            that.studentStateNmber.doIngCount = rst.doIngCount;
            that.studentStateNmber.noBeginDoCount = rst.noBeginDoCount;
            that.studentStateNmber.submitCount = rst.submitCount;
            if (rst.list.length) {
              this.maxModifiedTime = rst.maxModifiedTime;
              this.studentList = this.trimSpace(this.studentList, rst.list);
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 学生状态数据重组
    trimSpace(newArray, oldArray) {
      for (let n = 0; n < newArray.length; n++) {
        for (let i = 0; i < oldArray.length; i++) {
          if (newArray[n].Id == oldArray[i].Id) {
            newArray[n].status =
              oldArray[i].State == 3 ? 2 : oldArray[i].State == 0 ? 3 : oldArray[i].State == 1 ? 1 : 4;
            newArray[n].borderState =
              oldArray[i].State == 3 ? 2 : oldArray[i].State == 0 ? 3 : oldArray[i].State == 1 ? 1 : 4;
            newArray[n].LoginCode = oldArray[i].LoginCode;
          }
        }
      }
      return this.conformity(newArray);
    },
    // 学生状态人数
    conformity(newArray) {
      let underwaList = []; // State 0 进行中
      let finishList = []; // 1 已交卷
      let notStartList = []; // 3 未开始
      newArray.forEach((item) => {
        if (item.State == 0) {
          underwaList.push(item);
        } else if (item.State == 1) {
          finishList.push(item);
        } else {
          notStartList.push(item);
        }
      });
      return underwaList.concat(notStartList, finishList);
    },
    report() {
      let newPage = this.$router.resolve({
        name: this.$route.name === 'proctorManage' ? 'examreport' : 'examreportOne',
        params: {
          examid: this.examid,
          paperType: this.paperType
        }
      });
      window.open(newPage.href, '_blank');
    },
    // 点击表格操作
    // 点击table排序
    onTableChange(pagenation, filter, sort) {
      this.getCutStudent(pagenation.current, pagenation.pageSize);
    },
    // 获取切屏学生列表
    getCutStudent(current, pageSize) {
      let that = this;
      this.$http
        .post('/api/examMonitor/exammonitor/getCutList', {
          examId: this.examid,
          teacherType: this.teacherType,
          page: current || 1,
          pageSize: pageSize || 10,
          paperType: this.paperType
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.dataList = [];
            this.pagination.current = rst.pagination.pageIndex;
            this.pagination.pageSize = rst.pagination.pageSize;
            this.pagination.total = rst.pagination.totalCount;
            this.dataList = rst.list;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    //验证激活码
    verificationCode() {
      this.$http
        .post('/api/examMonitor/exammonitor/verificationCode', {
          examId: this.examid,
          activationCode: this.activationCode
        })
        .then((rst) => {
          if (rst.code > 0) {
            this.getProctorInfo();
            this.codeDlg = false;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 获取切屏弹幕学生
    getCutScreen(maxseq, type) {
      let that = this;
      this.$http
        .post('/api/examMonitor/exammonitor/getBulletChat', {
          examId: this.examid,
          type: type ? 1 : 0,
          teacherType: this.teacherType,
          seqId: maxseq || this.seqId,
          paperType: this.paperType
          // seqId: 0 // 测试动画用的参数
        })
        .then((rst) => {
          if (rst.code > 0) {
            if (type) {
              this.isFirstStart = false;
              this.splitList = [];
            }
            this.seqId = rst.maxSeqId;
            if (rst.list && rst.list.length) {
              let underwaList = this.studentList.filter((item) => item.status == 3);
              let bulletChatList = this.trimList(underwaList, rst.list);
              if (bulletChatList.length > 20) {
                bulletChatList = bulletChatList.splice(0, 6);
              }
              bulletChatList.forEach((item, index) => {
                if (this.showBullet) {
                  let c_top = document.body.scrollTop + document.documentElement.scrollTop;
                  let dom_height = document.documentElement.clientHeight;
                  var random_top = Math.random() * (dom_height - 50 - 90) + c_top + 'px';
                  var random_delay = Math.random() * 3 + 's';
                }
                if (this.showShine) {
                  try {
                    let stuDom = this.$refs[`stu_${item.StudentId}`][0];
                    let iconDom = this.$refs[`icon_${item.StudentId}`][0];
                    let stu_classList = [];
                    let arr_stu = Array.prototype.slice.call(stuDom.classList);
                    let arr_icon = Array.prototype.slice.call(stuDom.classList);
                    arr_stu.forEach((item) => {
                      stu_classList.push(item);
                    });
                    let icon_classList = [];
                    arr_icon.forEach((item) => {
                      icon_classList.push(item);
                    });

                    let stuFlag = arr_stu.includes('danger-animate-border');
                    let iconFlag = arr_icon.includes('danger-animate-warming');
                    if (stuFlag) {
                      stuDom.classList.remove('danger-animate-border');
                    }
                    if (iconFlag) {
                      iconDom.classList.remove('danger-animate-warming');
                    }
                    stuDom.classList.add('danger-animate-border');
                    iconDom.classList.add('danger-animate-warming');
                    setTimeout(() => {
                      stuDom.classList.remove('danger-animate-border');
                      iconDom.classList.remove('danger-animate-warming');
                    }, 6500);
                  } catch (error) {
                    //
                  }
                }

                this.splitList.push({
                  id: index,
                  ...item,
                  top: this.showBullet ? random_top : '',
                  delay: this.showBullet ? random_delay : ''
                });
              });
            }
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 数据筛选
    trimList(underwaList, oldArray) {
      let list = [];
      for (let n = 0; n < underwaList.length; n++) {
        for (let i = 0; i < oldArray.length; i++) {
          if (underwaList[n].UserId == oldArray[i].StudentId) {
            list.push(oldArray[i]);
          }
        }
      }
      return list;
    },
    // 添加零
    addZero(i) {
      if (i < 10) {
        i = '0' + i;
      }
      return i;
    },
    // 重置时间
    resetTimeAction() {
      let endDate = new Date().getTime() + this.cacheTime * 1000;
      this.setTimer = setInterval(() => {
        let diffSecond = parseInt((endDate - new Date().getTime()) / 1000); //结束时间到现在差的秒数
        if (diffSecond > 0) {
          let h = Math.floor(diffSecond / 3600);
          let m = Math.floor((diffSecond % 3600) / 60);
          let s = Math.floor((diffSecond % 3600) % 60);
          this.resetTime = `${this.addZero(h)}:${this.addZero(m)}:${this.addZero(s)}`;
        } else {
          this.resetTime = 0;
          clearInterval(this.setTimer);
          clearInterval(this.examTimer);
        }
        if (!this.resetTime) {
          this.resetTime = '考试已结束';
        }
      }, 1000);
    },
    // 获取当前时间
    formatDateTime() {
      let date = new Date();
      let YYYY = date.getFullYear();
      let MM = date.getMonth() + 1;
      let DD = date.getDate();
      let hh = date.getHours();
      let mm = date.getMinutes();
      let ss = date.getSeconds();
      MM = MM < 10 ? '0' + MM : MM;
      DD = DD < 10 ? '0' + DD : DD;
      hh = hh < 10 ? '0' + hh : hh;
      mm = mm < 10 ? '0' + mm : mm;
      ss = ss < 10 ? '0' + ss : ss;
      return YYYY + '-' + MM + '-' + DD + ' ' + hh + ':' + mm + ':' + ss;
    },
    // 全选
    onCheckAllChange(val) {
      this.checkAll = !this.checkAll;
      if (this.checkAll) {
        this.studentList.forEach((item) => {
            this.checkedList.push(item.UserId);
        });
      } else {
        this.checkedList = [];
      }
      this.indeterminate = false;
    },
    // 显示选择的modal
    manyDelaySet() {
      if (!this.checkedList.length) {
        this.$message.error('请先选择学生!');
        return;
      }
      this.timeVisible = true;
    },
    // 关闭modal的事件
    afterClose() {
      this.delayTime = '';
    },
    showModal() {
      this.qrCode = true;
    },
    handleCancel() {
      this.qrCode = false;
    },
    // 点击复制PC链接操作
    copyLinkAction() {
      const clipboard = new Clipboard(this.$refs.copyBtn);
      // 复制成功后执行的回调函数
      clipboard.on('success', (e) => {
        this.$message.success('复制成功');
        e.clearSelection(); // 清除选中内容
        clipboard.destroy();
      });
      clipboard.on('error', (e) => {
        this.$message.error('复制失败，请采用手动复制');
        clipboard.destroy();
      });
    },
    // 点击复制Mobile链接操作
    copyLinkMobile() {
      const clipboard = new Clipboard(this.$refs.copyMobile);
      // 复制成功后执行的回调函数
      clipboard.on('success', (e) => {
        this.$message.success('复制成功');
        e.clearSelection(); // 清除选中内容
        clipboard.destroy();
      });
      clipboard.on('error', (e) => {
        this.$message.error('复制失败，请采用手动复制');
        clipboard.destroy();
      });
    },
    // 确认延时时间
    sureDelay() {
      if (!this.delayTime) {
        this.$message.error('设置的时间不正确!');
        return;
      }
      let ids = Array.prototype.slice.call(this.checkedList);
      this.loading = true;
      this.$http
        .post('/api/examMonitor/exammonitor/delayedTime', {
          examId: this.examid,
          userIds: ids,
          delayedTime: this.delayTime,
          paperType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.$message.success(rst.msg);
            this.timeVisible = false;
            this.delayTime = '';
            this.checkAll = false;
            this.indeterminate = false;
            this.checkedList = [];
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 批量交卷
    manySubmit() {
      if (!this.checkedList.length) {
        this.$message.error('请先选择学生!');
        return;
      }
      this.$confirm({
        title: '提示',
        content: '确定要进行该操作？',
        centered: true,
        cancelText: '取消',
        okText: '确定',
        onOk: () => {
          this.loading = true;
          let ids = Array.prototype.slice.call(this.checkedList);
          this.$http
            .post('/api/examMonitor/exammonitor/updateStuState', {
              examId: this.examid,
              userIds: ids,
              paperType: this.paperType
            })
            .then((res) => {
              this.loading = false;
              if (res.code > 0) {
                this.$message.success(res.msg);
                this.checkedList = [];
                this.indeterminate = false;
                this.getExamStuQueryList();
                // this.getStudentList();
              } else {
                this.$message.error(res.msg);
              }
            });
        },
        onCancel() {}
      });
    },
    //提醒弹窗
    sendMessagePopup(){
      if (!this.checkedList.length) {
        this.$message.error('请先选择学生!');
        return;
      }
      this.messageVisible = true;
    },
    //确定发送提醒
    sendMessage(){
      if (!this.messageData) {
        this.$message.error('请输入发送内容');
        return;
      }
      let ids = Array.prototype.slice.call(this.checkedList);
      this.loading = true;
      this.$http
        .post('/api/examMonitor/exammonitor/messageReminder', {
          batchId: this.batchid,
          examId: this.examid,
          stuIds: ids,
          workExamType: this.paperType,
          content: this.messageData
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.$message.success(rst.msg);
            this.messageVisible = false;
            this.messageData = '';
            this.checkAll = false;
            this.indeterminate = false;
            this.checkedList = [];
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    //获取提醒列表
    getExamMessageList(current, pageSize, sort){
      this.loading = true;
       this.$http.post('/api/examMonitor/exammonitor/getExamMessageList', 
       {
          batchId: this.batchid,
          examId: this.examid,
          workExamType: this.paperType,
          pageSize: pageSize || 10,
          page: current || 1,
          sort
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            // this.modalList = rst.list;
            this.modalList = [];
            this.modalPagination.current = rst.pagination.pageIndex;
            this.modalPagination.pageSize = rst.pagination.pageSize;
            this.modalPagination.total = rst.pagination.totalCount;
             if (rst.list.length) {
              rst.list.forEach((item, index) => {
                let number = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index + 1;
                let key = (rst.pagination.pageIndex - 1) * rst.pagination.pageSize + index;
                this.modalList.push({
                  ...item,
                  key: item.Id,
                  number: number
                });
              });
            }
            this.messageListVisible = true;

          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 点击table排序
    onModalChange(pagenation, filter, sort) {
      let sortOrder = '';
      if (sort.order) {
        if (sort.order == 'ascend') {
          sortOrder = sort.columnKey;
        } else if (sort.order == 'descend') {
          sortOrder = '-' + sort.columnKey;
        } else {
          sortOrder = '';
        }
      }
      this.getExamMessageList(pagenation.current, pagenation.pageSize, sortOrder);
    },
    // 选择监听事件
    onselectChange(val) {
      this.indeterminate = val.length && val.length < this.studentList.length;
      this.checkAll = val.length && val.length === this.studentList.length;
    },
    copyMa() {
      this.clipboard = new Clipboard(this.$refs.copyBtn);
      // 复制成功后执行的回调函数
      this.clipboard.on('success', (e) => {
        this.$message.success('复制成功');
        e.clearSelection(); // 清除选中内容
        this.clipboard.destroy();
      });
      this.clipboard.on('error', (e) => {
        this.$message.error('复制失败，请采用手动复制');
        this.clipboard.destroy();
      });
    },
    // 显示弹幕和闪烁
    showBSAction(val) {
      switch (val) {
        case 1:
          if (this.isHasBullet) {
            this.showBullet = !this.showBullet;
          } else {
            this.$message.info('您的版本太低，请先升级版本！');
          }
          break;
        case 2:
          if (this.isHasShine) {
            this.showShine = !this.showShine;
          } else {
            this.$message.info('您的版本太低，请先升级版本！');
          }
          break;
        case 3:
          if (this.checkedList.length) {
            this.showIsUserCa = true;
          } else {
            if (this.examType == 1) {
              this.$message.error('考试已结束！');
            } else {
              this.$message.error('请先选择你要设置的学生！');
            }
          }
          break;
        case 4:
          if (this.examType == 1) {
            this.$message.error('考试已结束！');
          } else {
            if (!this.checkedList.length) {
              this.$message.error('请选择需要解禁的学生!');
              return;
            }
            this.$confirm({
              title: '提示',
              content: '确定要进行该操作？',
              centered: true,
              cancelText: '取消',
              okText: '确定',
              onOk: () => {
                this.loading = true;
                let ids = Array.prototype.slice.call(this.checkedList);
                this.$http
                  .post('/api/examMonitor/ExamMonitor/setDoingType', {
                    examId: this.examid,
                    userIds: ids,
                    paperType: this.paperType
                  })
                  .then((rst) => {
                    this.loading = false;
                    if (rst.code > 0) {
                      this.checkedList = [];
                      this.checkAll = false;
                      this.$message.success(rst.msg);
                    } else {
                      this.$message.error(rst.msg);
                    }
                  });
              },
              onCancel() {}
            });
          }
          break;
        default:
          break;
      }
    },
    codeCancel() {
      this.codeDlg = false;
      this.paperId = '';
    },
    // 展开或关闭
    openList() {
      if (this.isHasList) {
        this.isOpenList = !this.isOpenList;
      } else {
        this.$message.info('您的版本太低，请先升级版本！');
      }
    },
    // 查看的点击事件
    lookDetail(val) {
      switch (val) {
        case 1:
          this.lookTitle = '监考授权码';
          this.ModalText = this.loginCode;
          break;
        case 2:
          this.lookTitle = '监考教师登录链接';
          this.ModalText = this.loginUrl;
          break;
        default:
          break;
      }
      this.visible = true;
      setTimeout(() => {
        if (!this.clipboard) {
          this.copyMa();
        }
        // this.copyMa();
      }, 550);
    },
    // 查看的点击事件
    showExamLink(val) {
      this.lookTitle = '考试链接';
      this.examDlg = true;
    },
    // 查看学生详情
    lookStudentDetail(stu) {
      this.detailVisible = true;
      this.cacheStudent = stu;
      this.loading = true;
      this.$http
        .post('/api/examMonitor/exammonitor/getExamStuInfo', {
          examId: this.examid,
          userId: stu.UserId || stu.StudentId,
          paperType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.studenExamDetail.avatorUrl = rst.avatorUrl;
            this.studenExamDetail.firstUrl = rst.firstUrl;
            this.studenExamDetail.name = rst.displayName;
            this.studenExamDetail.abnormalCount = rst.abnormalList.length || 0;
            this.studenExamDetail.status =
              rst.state == 3 ? '未开始' : rst.state == 1 || rst.state == 2 ? '已交卷' : '进行中';
            this.studenExamDetail.state = rst.state;
            this.studenExamDetail.StuStartDoTime = rst.StuStartDoTime;
            this.studenExamDetail.commitExam = rst.submitCreated || '--';
            this.studenExamDetail.cutPage = rst.cutList.length || 0;
            this.studenExamDetail.abnormalList = [];
            this.studenExamDetail.invalidState = rst.invalidState;
            this.studenExamDetail.doBrowser = rst.doBrowser || '--';
            this.studenExamDetail.doIP = rst.doIP || '--';
            this.studenExamDetail.submitBrowser = rst.submitBrowser || '--';
            this.studenExamDetail.submitIP = rst.submitIP || '--';
            this.studenExamDetail.delayedTime = rst.delayedTime;
            this.studenExamDetail.useTime = this.changeTime(rst.useTime) || '--';
            this.studenExamDetail.RandomList = rst.RandomList || [];
            this.studenExamDetail.userName = rst.userName;
            this.studenExamDetail.mobile = rst.mobile;
            if (rst.abnormalList.length) {
              rst.abnormalList.forEach((item, index) => {
                this.studenExamDetail.abnormalList.push({
                  number: index + 1,
                  ...item
                });
              });
            }
            this.studenExamDetail.cutList = [];
            if (rst.cutList.length) {
              rst.cutList.forEach((item, index) => {
                this.studenExamDetail.cutList.push({
                  number: index + 1,
                  ...item
                });
              });
            }
            this.studenExamDetail.isEffective = rst.isEffective ? 1 : 2;
            this.studenExamDetail.invalidReason = rst.invalidReason;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    changeTime(time) {
      let N_time = Number(time);
      if (!isNaN(N_time)) {
        let h = Math.floor(N_time / 3600);
        let m = Math.floor((N_time % 3600) / 60);
        let s = (N_time % 3600) % 60;
        if (!h && !m && !s) {
          return '--';
        } else {
          return `${h ? h + '时' : ''} ${m ? m + '分' : ''}${s ? s + '秒' : ''}`;
        }
      } else {
        return '--';
      }
    },
    // 去除前后空格
    Trim(str) {
      return str.replace(/(^\s*)|(\s*$)/g, '');
    },
    // 修改成绩是否有效
    sureUpdate() {
      if (this.studenExamDetail.isEffective == 2) {
        if (this.studenExamDetail.invalidState == 0) {
          this.$message.info('请选择无效理由!');
          return;
        }
        if (this.studenExamDetail.invalidState == 3) {
          if (!this.Trim(this.studenExamDetail.invalidReason)) {
            this.$message.info('作答无效理由必须填写!');
            return;
          }
        }
      }
      this.loading = true;
      this.$http
        .post('/api/examMonitor/exammonitor/saveEffective', {
          examId: this.examid,
          userId: this.cacheStudent.UserId || this.cacheStudent.StudentId,
          isEffective: this.studenExamDetail.isEffective == 1 ? true : false,
          invalidState: this.studenExamDetail.invalidState,
          reasonText: this.studenExamDetail.invalidReason,
          paperType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.$message.success(rst.msg);
            this.cacheStudent = '';
            this.studenExamDetail.isEffective = 1;
            this.studenExamDetail.invalidReason = '';
            this.studenExamDetail.invalidState = 1;
            this.detailVisible = false;
          } else {
            this.$message.error(rst.msg);
          }
        });
    },
    // 关闭modal的事件
    detailClose() {
      this.cacheStudent = '';
      this.studenExamDetail.isEffective = 1;
      this.studenExamDetail.invalidReason = '';
      this.studenExamDetail.invalidState = 1;
    },
    // 设置是否使用摄像仪
    sureUserCa() {
      this.loading = true;
      let ids = Array.prototype.slice.call(this.checkedList);
      this.$http
        .post('/api/examMonitor/ExamMonitor/setIsUseCamera', {
          examId: this.examid,
          userIds: ids,
          type: this.getIsUserCa,
          paperType: this.paperType
        })
        .then((rst) => {
          this.loading = false;
          if (rst.code > 0) {
            this.showIsUserCa = false;
            this.getIsUserCa = 1;
            this.checkedList = [];
            this.checkAll = false;
            this.indeterminate = false;
            this.$message.success(rst.msg);
            this.getStudentList();
          } else {
            this.$message.error(rst.msg);
          }
        });
    }
  },
  beforeRouteLeave(to, from, next) {
    clearInterval(this.examTimer);
    next();
  }
};
</script>
